<template>
  <div class="container">
    <div class="steps-wrapper">
      <el-steps :active="activeStep" align-center>
        <el-step title="推送信息" icon="el-icon-s-promotion" />
        <el-step title="选择用户" icon="el-icon-s-custom" />
      </el-steps>
    </div>

    <tweets-step1
      v-if="activeStep === 0"
      :is-edit="true"
    />
    <tweets-step2
      v-if="activeStep === 1"
      :is-edit="true"
    />
  </div>
</template>

<script>
import TweetsStep1 from './templates/TweetsStep1'
import TweetsStep2 from './templates/TweetsStep2'

export default {
  name: 'TweetsTemplateMsgsEdit',
  components: {
    TweetsStep1,
    TweetsStep2
  },
  data() {
    return {
      activeStep: 0
    }
  },
  watch: {
    $route: {
      handler(route) {
        if (!this._.isEmpty(route.query.step)) {
          this.activeStep = parseInt(route.query.step) - 1
        } else {
          this.activeStep = 0
        }
      },
      immediate: true
    }
  },
  created() {
    if (!this._.isEmpty(this.$route.query.step)) {
      this.activeStep = parseInt(this.$route.query.step) - 1
    } else {
      this.activeStep = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.steps-wrapper {
  padding: 40px 140px;
}
</style>
